import React, { useState, useContext } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { colors } from 'react-native-tailwindcss';
import { CheckBox } from 'react-native-elements';
import IconFont from '../../assets/iconfont';
import styles from './styles';

const ShopChooseScreen = props => {
  const [shopList, setShopList] = useState([
    {
      name: '吉瑞汽修',
      checked: false,
      shop_id: 0,
    },
    {
      name: '众达汽修',
      checked: false,
      shop_id: 1,
    },
    {
      name: '瑞成汽修',
      checked: false,
      shop_id: 2,
    },
  ]);

  /**
   * 选择店铺
   * @param {*} id 店铺 id
   */
  const handleChooseShop = id => {
    setShopList(
      shopList.map(shop => ({ ...shop, checked: shop.shop_id === id })),
    );
  };

  return (
    <View style={styles.fullScreen}>
      {/* 店铺表单 */}
      <View style={styles.form}>
        {/* 表单标题 */}
        <Text style={styles.formTitle}>请选择店铺</Text>

        {/* 店铺列表 */}
        {shopList.map(shop => (
          <View key={shop.name} style={styles.formLabel}>
            <Text style={styles.formCheckbox}>{shop.name}</Text>
            <CheckBox
              center
              onPress={() => handleChooseShop(shop.shop_id)}
              containerStyle={styles.formCheckboxInner}
              checkedIcon={
                <IconFont
                  name="icon-finish"
                  color={colors.themeBlue}
                  size={20}
                />
              }
              uncheckedIcon={
                <IconFont name="icon-finish" color={colors.gray400} size={20} />
              }
              checked={shop.checked}
            />
          </View>
        ))}

        {/* 确认按钮 */}
        <TouchableOpacity onPress={() => {}} style={styles.formButton}>
          <Text style={styles.formButtonText}>确 认</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default ShopChooseScreen;
